<template xmlns:a-col='http://www.w3.org/1999/html'>
  <a-modal
    :title='title'
    :width='700'
    :visible='visible'
    :centered='true'
    :confirmLoading='confirmLoading'
    :maskClosable='false'
    @ok='handleSubmit'
    @cancel='handleCancel'
  >
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row>
          <a-col :span='12'>
            <a-form-item label='客户姓名' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input
                placeholder='请输入客户姓名'
                v-decorator="['full_name', { rules: [{ required: true, message: '请输入客户姓名' }] }]"
              />
            </a-form-item>
            <a-form-item label='身份证号' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input
                placeholder='请输入身份证号'
                v-decorator="['idnumber', { rules: [{ required: false, message: '请输入身份证号' }] }]"
              />
            </a-form-item>
            <a-form-item label='公司名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input
                placeholder='请输入公司名称'
                v-decorator="['corporate_name', { rules: [{ required: false, message: '请输入公司名称' }] }]"
              />
            </a-form-item>
            <a-form-item label='授权签约人' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input
                placeholder='请输入授权签约人'
                v-decorator="['signatory', { rules: [{ required: false, message: '请输入授权签约人' }] }]"
              />
            </a-form-item>
            <a-form-item label='手机号码' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input
                placeholder='请输入手机号码'
                v-decorator="['mobile', { rules: [{ required: true, message: '请输入手机号码' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='客户区域' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input
                placeholder='请输入客户区域'
                v-decorator="['region', { rules: [{ required: false, message: '请输入客户区域' }] }]"
              />
            </a-form-item>
            <a-form-item label='客户来源' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <SelectPresalesSource
                :disabled="mode=='edit'?true:false"
                width='100%'
                placeholder='请选择客户来源'
                v-decorator="['pcs_id', { rules: [{ required: true, message: '请选择客户来源' }] }]"
              />
            </a-form-item>
            <a-form-item label='客户类型' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <SelectPresalesType
                width='100%'
                placeholder='请选择客户类型'
                v-decorator="['pct_id', { rules: [{ required: false, message: '请选择客户类型' }] }]"
              />
            </a-form-item>
            <a-form-item label='其他联系人' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input
                placeholder='请输入其他联系人'
                v-decorator="['other_contacts', { rules: [{ required: false, message: '请输入其他联系人' }] }]"
              />
            </a-form-item>
            <a-form-item label='其他联系人手机' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input
                placeholder='请输入其他联系人手机'
                v-decorator="['other_contacts_mobile', { rules: [{ required: false, message: '请输入其他联系人手机' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label='客户需求说明' :labelCol='{span:4}' :wrapperCol='{span:20}'>
          <a-textarea
            :maxLength='200'
            v-decorator="['illustrate', { rules: [{ required: false, message: '请输入客户需求说明' }] }]"
            placeholder='请输入客户需求说明'
            :auto-size='{ minRows: 5, maxRows: 10 }'
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import _ from 'lodash'
import * as Api from '@/api/presales_customer'
import { SelectPresalesSource, SelectPresalesType } from '@/components'

export default {
  components: {
    SelectPresalesSource,
    SelectPresalesType
  },
  data() {
    return {
      // 对话框标题
      title: '',
      // 标签布局属性
      labelCol: {
        span: 9
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 当前记录
      record: {},
      // 当前模式
      mode: ''

    }
  },
  methods: {
// 多选框搜索配置
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 显示对话框
    add() {
      this.mode = 'add'
      this.title = '添加客户'
      this.visible = true
    },
    edit(record) {
      this.mode = 'edit'
      this.title = '编辑客户'
      this.visible = true
      this.record = record
      this.setFieldsValue()
    },

    hasEmptyValue(arr) {
      return arr.some(obj => Object.values(obj).some(value => value === ''))
    },
    // 设置默认值
    setFieldsValue() {
      const { form: { setFieldsValue } } = this
      this.$nextTick(() => {
        const data = _.pick(this.record, Object.keys(this.record))
        setFieldsValue(data)
      })
    },

    // 确认按钮
    handleSubmit(e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      // 表单验证
      validateFields((errors, values) => {
        // 提交到后端api
        !errors && this.onFormSubmit(values)
      })
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
      this.form.resetFields()
    },

    // 提交到后端api
    onFormSubmit(values) {
      var api
      if (this.mode === 'add') {
        api = Api.add({ form: values })
      } else {
        api = Api.edit({ apiId: this.record['pc_id'], form: values })
      }
      this.confirmLoading = true

      api.then(result => {
        // 显示成功
        this.$message.success(result.message, 1.5)
        // 关闭对话框
        this.handleCancel()
        // 通知父端组件提交完成了
        this.$emit('handleSubmit', values)
      })
        .finally(result => {
          this.confirmLoading = false
        })
    }

  }
}
</script>
